<!--
 * @Description: 历史报送
 * @Author: Lihuanyu
 * @Date: 2021-09-06 17:52:38
 * @LastEditors: Lihuanyu
 * @LastEditTime: 2021-09-15 17:50:18
-->

<template>
  <view class="event-list">
    <view class="event-item" v-for="(item, index) in eventList" :key="index" @click="linkToDetail()">
      <cover-image :src="item.src" mode="aspectFit" class="img"></cover-image>
      <view class="info">
        <!-- 状态判断 -->
        <view class="title">
          <view>{{ item.title }}</view>
        </view>
         <view class="address">
          <text class="type" :class="'rank' + item.rank">{{ item.type }}</text>
          <text>{{ item.address }}</text>
        </view>
        <view class="info-status">
          <view class="time">
            <text class="iconfont icon-shijian1"></text>
            <text>{{ item.time }}</text>
          </view>
          <view class="status color-gray" v-if="item.status === 1">已处理</view>
          <view class="status color-blue" v-else-if="item.status === 2">待处理</view>
          <view class="status color-red" v-else>不处理</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      eventList: [
        {
          src: "https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg",
          title: "南山区发生洪涝灾害，请紧急处涝灾害",
          time: "2021-12-12 12:20:12",
          status: 1,
          address: "深圳市南山区观澜河水文监测站",
          type: "洪涝",
          rank: 1,
        },
        {
          src: "https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg",
          title: "南山区发生洪涝灾害，请紧急处涝灾害",
          time: "2021-12-12 12:20:12",
          status: 2,
          address: "深圳市南山区观澜河水文监测站",
          type: "滑坡",
          rank: 2,
        },
        {
          src: "https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg",
          title: "南山区发生洪涝灾害，请紧急处涝灾害南山区发生洪涝灾害，请紧急处涝灾害南山区发生洪涝灾害，请紧急处涝灾害南山区发生洪涝灾害，请紧急处涝灾害",
          time: "2021-12-12 12:20:12",
          status: 1,
          address: "深圳市南山区观澜河水文监测站",
          type: "洪涝",
          rank: 1,
        },
        {
          src: "https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg",
          title: "南山区发生洪涝灾害，请紧急处涝灾害",
          time: "2021-12-12 12:20:12",
          status: 2,
          address: "深圳市南山区观澜河水文监测站",
          type: "滑坡",
          rank: 2,
        },
      ],
    };
  },
  methods: {
    // 信息详情
    linkToDetail() {
      uni.navigateTo({
        url: '/pages/report/report-detail'
      })
    },
  },
};
</script>

<style lang="scss" scoped>
//等级
.rank1 {
  background: rgba(50, 148, 255, 0.2);
  border: 1px solid #027aff;
  color: #027aff;
}

.rank2 {
  background: rgba(252, 162, 80, 0.2);
  border: 1px solid #ffa451;
  color: #ffa451;
}

.rank3 {
  background: rgba(255, 183, 60, 0.2);
  border: 1px solid #ffcb52;
  color: #ffcb52;
}

.color-blue{
  color: #027AFF;
  background: url('@/static/images/chuli.png') left center no-repeat;
  background-size: 24rpx;
}

.color-red{
  color: #FF5151;
  background: url('@/static/images/chuli.png') left center no-repeat;
  background-size: 24rpx;
}

.color-gray{
  color: #00D694;
  background: url('@/static/images/chuli.png') left center no-repeat;
  background-size: 24rpx;
}

.event-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 2rpx solid #e4e7f0;
  padding: 48rpx 0;
  .img {
    max-width: 170rpx;
    max-height: 150rpx;
    border-radius: 8px;
  }
  .info {
    width: calc(100% - 190rpx);
    position: relative;
    .title {
      color: #2b2b2b;
      font-size: 30rpx;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      display: -webkit-box;
    }

    .address {
      font-size: 24rpx;
      color: rgba($color: #2b2b2b, $alpha: 0.6);
      margin-top: 20rpx;
      .type {
        display: inline-block;
        height: 36rpx;
        border-radius: 16px;
        font-size: 22rpx;
        padding: 0 16rpx;
        line-height: 36rpx;
        margin-right: 24rpx;
      }
    }

    .info-status{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .time {
        font-size: 22rpx;
        color: rgba($color: #2b2b2b, $alpha: 0.6);
        .iconfont {
          font-size: 22rpx;
          margin-right: 10rpx;
        }
      }
      .status{
        text-align: right;
        font-size: 22rpx;
        width: 100rpx;
      }
    }
  }
}
</style>>

